<template>
  <div class="threeBox">
    <canvas id="c"></canvas>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
// import './style.css'
import * as THREE from 'three'

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
onMounted(() => {
  const canvas = document.querySelector('#c')
  const renderer = new THREE.WebGLRenderer({ canvas })
  const fov = 75
  const aspect = 2  // 相机默认值
  const near = 0.1
  const far = 50
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
  // camera.position.z = 2
  const scene = new THREE.Scene()
  const boxWidth = 1
  const boxHeight = 1
  const boxDepth = 1
  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth)
  const material = new THREE.MeshBasicMaterial({ color: 0x44aa88 })
  const cube = new THREE.Mesh(geometry, material)
  // scene.add(cube)

  // const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth)
  const objects = []
  const solarSystem = new THREE.Object3D()
  scene.add(solarSystem)
  objects.push(solarSystem)
  const rtadius = 2
  const widthSegments = 6
  const heightSegments = 6
  const sphereGeometry = new THREE.SphereGeometry(
    rtadius,
    widthSegments,
    heightSegments,
  )
  const sunMaterial = new THREE.MeshPhongMaterial({ emissive: 0xFFFF00 })
  const sunMesh = new THREE.Mesh(sphereGeometry, sunMaterial)
  sunMesh.scale.set(5, 5, 5)
  solarSystem.add(sunMesh)
  objects.push(sunMesh)
  const color = 0xffffff
  const intensity = 1
  const light = new THREE.PointLight(color, intensity)
  scene.add(light)

  camera.position.set(0, 50, 0)
  camera.up.set(0, 0, 1)
  camera.lookAt(0, 0, 0)

  const earthMaterial = new THREE.MeshPhongMaterial({ color: 0x2233FF, emissive: 0x112244 })
  const earthMesh = new THREE.Mesh(sphereGeometry, earthMaterial)
  earthMesh.position.x = 30
  solarSystem.add(earthMesh)
  objects.push(earthMesh)
  const earthOrbit = new THREE.Object3D()
  earthOrbit.position.x = 10
  solarSystem.add(earthOrbit)
  objects.push(earthOrbit)

  earthOrbit.add(earthMesh)
  objects.push(earthMesh)

  const moonOrbit = new THREE.Object3D()
  moonOrbit.position.x = 2
  earthOrbit.add(moonOrbit)

  const moonMaterial = new THREE.MeshPhongMaterial({ color: 0x888888, emissive: 0x222222 })
  const moonMesh = new THREE.Mesh(sphereGeometry, moonMaterial)
  moonMesh.scale.set(.5, .5, .5)
  moonOrbit.add(moonMesh)
  objects.push(moonMesh)
  function render (time) {
    time *= 0.001  // 将时间单位变为秒
    objects.forEach((obj) => {
      obj.rotation.y = time
    })
    renderer.render(scene, camera)

    requestAnimationFrame(render)
  }

  requestAnimationFrame(render)

})

</script>

<style scoped
  lang="scss">
  .threeBox {
    width: 1920px;
    height: 923px;

    canvas {
      width: 100%;
      height: 100%;
    }
  }
</style>
